<template>
    <view class="library-view-header">
        <!-- 返回箭头 -->
        <view class="nav-left" @click="handleBack">
            <han-icon name="return" size="36" />
        </view>

        <view class="add" :class="{ added: isAdded }" @click="handleAddToShelf">
            {{ isAdded ? '已加入书架' : '加入书架' }}
        </view>

        <view class="icon">
            <han-icon name="more_settings" size="36" />
        </view>
    </view>
</template>

<script setup>
import { ref } from 'vue';

const isAdded = ref(false); // 是否已加入书架

// 处理加入书架
const handleAddToShelf = () => {
    isAdded.value = !isAdded.value;
};

// 退出页面
const handleBack = () => {
    uni.navigateBack({
        delta: 1
    });
};
</script>

<style scoped lang="scss">
.library-view-header {
    display: flex;
    align-items: center;
    padding: 0 20rpx;
    height: $han-nav-bar-height;
    background-color: $han-global-bg-color;
    position: relative;

    .add {
        font-size: $han-font-size-base;
        color: $han-global-primary-font-color;
        margin-left: auto;
        margin-right: 40rpx;

        &.added {
            color: $han-global-secondary-font-color;
        }
    }
}
</style>
